<template>
  <el-card>
    <!-- 1. 面包屑 -->
    <my-bread level1="商品管理" level2="商品列表"></my-bread>

    <!-- 提示 -->
    <el-alert
      class="alert"
      title="添加商品信息"
      type="success"
      center
      show-icon
    >
    </el-alert>
    <!-- 步骤条 -->
    <el-steps :active="1 * active" align-center>
      <el-step title="基本信息"></el-step>
      <el-step title="商品参数"></el-step>
      <el-step title="商品属性"></el-step>
      <el-step title="商品图片"></el-step>
      <el-step title="商品内容"></el-step>
    </el-steps>

    <!-- 竖形步骤条 tabs  -->
    <el-form
      label-position="top"
      label-width="80px"
      :model="form"
      style="height: 400px; overflow: auto"
    >
      <el-tabs v-model="active" tab-position="left" @tab-click="tabChange()">
        <el-tab-pane name="1" label="基本信息">
          <el-form-item label="商品名称">
            <el-input v-model="form.goods_name"></el-input>
          </el-form-item>

          <el-form-item label="商品价格">
            <el-input v-model="form.goods_price"></el-input>
          </el-form-item>
          <el-form-item label="商品重量">
            <el-input v-model="form.goods_weight"></el-input>
          </el-form-item>
          <el-form-item label="商品数量">
            <el-input v-model="form.goods_number"></el-input>
          </el-form-item>

          <el-form-item lable="商品分类">
            <!-- 级联选择器 -->
            <el-cascader
              clearable
              expandTrigger="hover"
              v-model="selectedOptionns"
              :options="options"
              :props="defaultprop"
              @change="handleChange"
            ></el-cascader>
          </el-form-item>
        </el-tab-pane>

        <el-tab-pane name="2" label="商品参数">
          <!-- 显示的是该三级分类的商品参数 -->
          <el-form-item
            :label="item1.attr_name"
            v-for="(item1, i) in arrDyparams"
            :key="i"
          >
            <!-- 复选框组 -->
            <el-checkbox-group v-model="item1.attr_vals">
              <el-checkbox
                border
                :label="item2"
                v-for="(item2, i) in item1.attr_vals"
                :key="i"
              ></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-tab-pane>

        <el-tab-pane name="3" label="商品属性">
          <!-- 静态参数 -->
          <el-form-item
            :label="item.attr_name"
            v-for="(item, i) in arrStaticparams"
            :key="i"
          >
            <el-input v-model="item.attr_vals"></el-input>
          </el-form-item>
        </el-tab-pane>

        <el-tab-pane name="4" label="商品图片">
          <!-- 图片上传 -->
          <!-- baseUrl axios 发的请求设置 上传图片不是axios请求 -->
          <el-form-item>
            <el-upload
              action="http://127.0.0.1:8888/api/private/v1/upload"
              :headers="headers"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              list-type="picture"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </el-form-item>
        </el-tab-pane>

        <el-tab-pane name="5" label="商品内容">
          <el-form-item>
            <el-button type="primary" @click="addGoods()"
              >点我添加商品</el-button
            >
            <!-- 富文本 -->
            <quill-editor v-model="form.goods_introduce"></quill-editor>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
    </el-form>
  </el-card>
</template>
<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

import { quillEditor } from "vue-quill-editor";

export default {
  components: {
    quillEditor,
  },
  data() {
    return {
      active: "1",
      //   添加商品的表单数据
      form: {
        goods_name: "",
        goods_price: "",
        goods_number: "",
        goods_weight: "",
        goods_introduce: "",
        goods_cat: "",
        pics: [],
        attrs: [],
      },
      // 级联选择器绑定的数据
      options: [],
      selectedOptionns: [1, 3, 6],
      defaultprop: {
        label: "cat_name",
        value: "cat_id",
        children: "children",
      },
      // 动态参数的数据数组
      arrDyparams: [],
      // 静态参数的数据数组
      arrStaticparams: [],
      headers: {
        Authorization: localStorage.getItem("token"),
      },
    };
  },
  created() {
    this.getGoodCate();
  },
  methods: {
    // 添加商品发送请求
    async addGoods() {
      // goods_cat
      this.form.goods_cat = this.selectedOptionns.join(",");
      // pics[] 在上传或删除图片时

      // attrs[]

      // 再发请求之前 处理this.form 中的未处理的数据
      const res = await this.$http.post(`goods`,this.form);
    },
    // 图片上传时的相关方法
    // file 形参
    handlePreview(file) {},
    // 删除时触发
    handleRemove(file) {
      //  file.response.data.tmp_path 删除路径
      // 从 this.form.pics 删除图片
      // findIndex((item) => {}) 能遍历数组 把符合条件的元素的下标索引 进行返回
      let Index = this.form.pics.findIndex((item) => {
        return item.pic === file.response.data.tmp_path;
      });
      this.form.pics.splice(Index, 1);
    },
    // 上传成功时触发
    handleSuccess(file) {
      //  file.data/tmp_path 上传路径
      // 给this.form.pics赋值
      this.form.pics.push({
        pic: file.data.tmp_path,
      });
    },
    // 点击不同的tab时
    async tabChange() {
      // 如果点击的是第二个tab 同时 三级分类要有值
      if (this.active === "2") {
        if (this.selectedOptionns.length !== 3) {
          //  提示
          this.$message.warning("请先选择商品的三级分类");
          return;
        }
        // 获取数据
        const res = await this.$http.get(
          `categories/${this.selectedOptionns[2]}/attributes?sel=many`
        );
        // console.log(res);
        // attr_name 和 attr_vals
        this.arrDyparams = res.data.data;
        // this.arrDyparams  每个对象。attr_vals字符串 数组  v-for
        this.arrDyparams.forEach((item) => {
          // 并不是所有的三级分类都有动态参数
          // if (item.attr_vals.length !== 0) {
          //   item.attr_vals = item.attr_vals.trim().split(",");
          // }
          item.attr_vals =
            item.attr_vals.length === 0 ? [] : item.attr_vals.trim().split(",");
        });
      } else if (this.active === "3") {
        if (this.selectedOptionns.length !== 3) {
          //  提示
          this.$message.warning("请先选择商品的三级分类");
          return;
        }
        // 获取静态参数的数据
        const res = await this.$http.get(
          `categories/${this.selectedOptionns[2]}/attributes?sel=only`
        );
        // console.log(res);
        this.arrStaticparams = res.data.data;
      }
    },
    // 级联选择器绑定的方法
    handleChange() {},
    // 获取三级分类的信息
    async getGoodCate() {
      const res = await this.$http.get(`categories?type=3`);
      // console.log(res);
      this.options = res.data.data;
    },
  },
};
</script>

<style >
.alert {
  margin-top: 20px;
}
.ql-editor {
  min-height: 200px;
}
</style>